/**
 * 学习目标：useEffect - 发送请求获取数据
 *   需求：
 *      组件挂载时，发送请求获取一次频道数据
 *
 *   💥开发注意事项：
 *      不要给 useEffect 第一级函数添加 async
 *
 *    ❌常见错误写法：
 *      useEffect(async () => {}, [])
 *
 *    ✅正确写法：
 *      useEffect(() => {
 *        async function loadDate(){}
 *        loadDate()
 *      }, [])
 *
 */

import { useEffect, useState } from 'react'
import request from './utils/request'

export default function App() {
  const [channels, setChannels] = useState([])

  // 不要给 useEffect 第一级函数添加 async
  useEffect(() => {
    // 写到里面可以被允许
    async function loadData() {
      const res = await request({
        url: '/v1_0/channels',
        method: 'get',
      })
      setChannels(res.data.channels)
    }
    loadData()
  }, [])

  return (
    <div>
      <h1>useEffect-发送请求</h1>
      <ul>
        {channels.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  )
}
